WordPress及びブラウザ経由で Developers.IO の執筆を加速させるテクニックをまとめていく

Developers.IO ブログ執筆ノウハウまとめ

#WordPress

#ライティング

しんや

2020.03.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

クラスメソッドでは「Developers.IO」でユーザーアカウントが発行されるとブログが好きなだけ書けるようになります。メンバー各位「好きなタイミングで好きなテーマを好きな時に書いている」のがクラスメソッドの日常ではあるのですが、執筆の際は極力手間を省き、また効率化出来るところは効率化して行きたいところではあります。

そこで当エントリでは、Developers.IOの基盤となっているWordPress環境下、及び執筆時に使えるテクニックを幾つかご紹介したいと思います。

(Developers.IOで利用出来るコードの)対象はHTMLタグのみのため、ブログ記法に「HTML」を用いているユーザーのみ恩恵に預かれる形となるのですが、この効果がとても強力なんです。HTMLタグの補完だけで無く、定められた略記法でコードを実行することで、煩雑だったHTMLタグの記載・展開が一発で済んでしまう素晴らしさ。どんな感じで出来るのかについては下記動画をご参照ください。

どんなコードを書くとどんな内容に展開されるのかについては下記「チートシート」にまとめられています。

Chrome拡張「Developers.IO編集アシスタント」 by shoitoを使ってカテゴリ選択を快適に

Developers.IOでブログ編集を行う際、任意のカテゴリ等を設定するには対象となる項目のチェックボックスを選択していく必要があります。現状、カテゴリ群については項目数が非常に多く増えているため、目的のものを探すのだけでも一苦労。そんな時に便利なのがこちらのChrome拡張機能です。

タグやカテゴリの選択エリアに検索窓が表示され、所定の入力文字列に該当するものを絞込表示してくれます。

情報収集・リンク生成のための作業を効率化

ブログ執筆に於いては、参照対象として任意のWebサイトのURLを貼る事は良くある事です。この情報を収集・追記するのも極力簡略化したいところ。主に以下の方法を用いることで実現が可能です。

Create Linkで管理

ブラウザのメニュー操作として、このURL情報(タイトル＆URL)を取得する方法。Google Chromeでは「Create Link」という拡張機能が用意されており、これを追加することで処理が実現出来ます。

取得項目・内容は個別に追加やカスタマイズが可能です。

所定のWebサイトに遷移後、右クリックメニューで選択を行うと、

以下の様な文字情報を得る事が出来ます。

<a href="https://dev.classmethod.jp/" target="_blank">クラスメソッド発「やってみた」系技術メディア | Developers.IO</a>

ブックマークとして保存

URL取得のためのコードを、ブラウザの「ブックマーク」として保存しておくというのもアリです。個人的にはこちらの方法が好きで良く使っています。

主に良く使っているのが以下2つ。「名前」に関してはお好みの文字列を設定してください。

プレーン形式("タイトル URL")

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value=''+document.title+' '+location.href+'';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()

HTML形式(aタグで装飾、target="_blank"属性あり)

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='<a target="_blank" href="'+location.href+'">'+ document.title +'</a>\n';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()